<script setup>
import PageContainer from '@/components/pageContainer.vue'
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import { userUpdatePwdService } from '@/api/user'
import { useUserStore } from '@/stores/index'
// 表单数据绑定
const pwdForm = ref({
  old_pwd: '',
  new_pwd: '',
  re_pwd: ''
})
// 表单引用
const pwdFormRef = ref(null)
// 自定义校验函数
const validateOldNewDiff = (rule, value, callback) => {
  if (value && pwdForm.value.old_pwd === value) {
    callback(new Error('新密码不能与原密码相同'))
  } else {
    callback()
  }
}
const validateRePwd = (rule, value, callback) => {
  if (value !== pwdForm.value.new_pwd) {
    callback(new Error('两次输入的密码不一致'))
  } else {
    callback()
  }
}
// 表单校验规则
const pwdRules = reactive({
  old_pwd: [
    {
      required: true,
      message: '请输入原密码',
      trigger: 'blur'
    },
    {
      min: 6,
      max: 15,
      message: '密码长度应为6-15位',
      trigger: 'blur'
    }
  ],
  new_pwd: [
    {
      required: true,
      message: '请输入新密码',
      trigger: 'blur'
    },
    {
      min: 6,
      max: 15,
      message: '密码长度应为6-15位',
      trigger: 'blur'
    },
    {
      validator: validateOldNewDiff,
      trigger: 'blur'
    }
  ],
  re_pwd: [
    {
      required: true,
      message: '请确认新密码',
      trigger: 'blur'
    },
    {
      min: 6,
      max: 15,
      message: '密码长度应为6-15位',
      trigger: 'blur'
    },
    {
      validator: validateRePwd,
      trigger: 'blur'
    }
  ]
})
const userStore = useUserStore()
// 提交表单
const handleSubmit = () => {
  pwdFormRef.value.validate(async (valid) => {
    if (valid) {
      // 表单验证通过，这里可以添加密码修改的逻辑
      await userUpdatePwdService(pwdForm.value)
      userStore.setToken('')
      userStore.setUser({})
      ElMessage.success('密码修改成功')
      // 重置表单
      handleReset()
    } else {
      ElMessage.error('请检查表单信息')
      return false
    }
  })
}
// 重置表单
const handleReset = () => {
  pwdFormRef.value.resetFields()
}
</script>
<template>
  <page-container title="修改密码">
    <el-form
      ref="pwdFormRef"
      :model="pwdForm"
      :rules="pwdRules"
      label-width="100px"
      class="password-modify-form"
    >
      <el-form-item label="原密码" prop="old_pwd">
        <el-input
          v-model="pwdForm.old_pwd"
          type="password"
          placeholder="请输入原密码"
          show-password
        />
      </el-form-item>
      <el-form-item label="新密码" prop="new_pwd">
        <el-input
          v-model="pwdForm.new_pwd"
          type="password"
          placeholder="请输入新密码"
          show-password
        />
      </el-form-item>
      <el-form-item label="确认密码" prop="re_pwd">
        <el-input
          v-model="pwdForm.re_pwd"
          type="password"
          placeholder="请确认新密码"
          show-password
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleSubmit">修改密码</el-button>
        <el-button @click="handleReset">重置</el-button>
      </el-form-item>
    </el-form>
  </page-container>
</template>
<style scoped>
.password-modify-form {
  max-width: 500px;
  margin: 0 auto;
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
</style>
